<template>
  <div>
    <el-row style="margin-left:13px;">
      <div>
        <i
          style="font-size:20px"
          class="el-icon-info"
          @click="showSingeInfo"
        ></i>
      </div>
    </el-row>
    <el-dialog
      title="合单详情"
      :visible.sync="showDialogVisible"
      width="90%"
      center
    >
      <div>
        <el-table
          :data="tableData"
          class="text-sm"
          style="width: 100%"
          v-if="null != tableData && tableData.length > 0"
        >
          <el-table-column type="index"> </el-table-column>
          <el-table-column prop="waybillNo" label="运单号" width="150px;">
            <template slot-scope="scope">
              <div>
                <span @dblclick="toEdit(scope)">{{ scope.row.waybillNo }}</span>
                <el-tooltip effect="dark" content="点击复制" placement="bottom">
                  <i
                    class="el-icon-copy-document tag-read"
                    :data-clipboard-text="scope.row.waybillNo"
                    @click="copy"
                  ></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="waybillSingleNo" label="分单号" width="150px;">
          </el-table-column>
          <el-table-column prop="masterNumber" label="M单号" width="200px;">
          </el-table-column>
          <el-table-column prop="vat" label="VAT号" width="150px;">
          </el-table-column>
          <el-table-column prop="isTaxFarming" label="是否包税">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.isTaxFarming == null
                  ? "否"
                  : yesNo[scope.row.isTaxFarming]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isCustomerDeclaration" label="是否报关">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.isCustomerDeclaration == null
                  ? "否"
                  : yesNo[scope.row.isCustomerDeclaration]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="eoriIsCertified" label="是否自有进口商">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.eoriIsCertified == null
                  ? "否"
                  : yesNo[scope.row.eoriIsCertified]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="dispatchAddressCode"
            label="仓库代码"
            width="150px;"
          >
          </el-table-column>
          <el-table-column prop="inStockActualWeight" label="实重">
          </el-table-column>
          <el-table-column prop="inStockVolume" label="体积">
          </el-table-column>
          <el-table-column prop="inStockVolumeWeight" label="体积重">
          </el-table-column>
          <el-table-column prop="inStockChargedWeight" label="计费重">
          </el-table-column>
          <el-table-column prop="inStockTotalPackages" label="件数">
          </el-table-column>
          <el-table-column prop="inStockTime" label="入库时间" width="150px;">
          </el-table-column>
        </el-table>
        <span style="margin-left:400px;" v-else>{{ titps }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";
import Clipboard from "clipboard";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      fullscreenLoading: false,
      yesNo: {
        1: "是",
        0: "否"
      },
      titps: "努力加载中",
      tableData: [
        // {
        //   waybillNo: "",
        //   masterNumber: "",
        //   isTaxFarming: "",
        //   isCustomerDeclaration: "",
        //   eoriIsCertified: "",
        //   dispatchAddressCode: "",
        //   inStockActualWeight: "",
        //   inStockVolumeWeight: "",
        //   inStockChargedWeight: "",
        //   inStockTotalPackages: ""
        // }
      ],
      showDialogVisible: false,
      systemReamrk: ""
    };
  },

  methods: {
    showSingeInfo() {
      this.showDialogVisible = true;
      var param = {};
      param["id"] = this.data["id"];
      this.fullscreenLoading = true;
      ajax("viewSeaAirMergeWaybillNoDetail", param).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code === 200) {
            if (null != res.data && res.data.length > 0) {
              this.tableData = res.data;
            } else {
              this.titps = "暂无数据";
            }
          } else {
            this.titps = "暂无数据";
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    toEdit(scope) {
      let waybillId = scope.row.id;
      let customerRemark = scope.row.customerRemark;
      let url = `#/blank/waybill__alledit__main?waybillId=${waybillId}`;
      window.open(url);
    },
    copy() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        this.$message.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$message.error("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    }
  },
  mounted() {
    this.systemReamrk = this.data["sysRemark"];
  }
};
</script>

<style>
.top {
  text-align: center;
}
</style>
